<template>
    <!-- 基本信息 -->
    <div>
      <div class="title-wrapper">
        <title-name title="风险跟踪计划信息"></title-name>
        <a-icon
          v-if="showPlanBoardVisible"
          :type="planBoardVisible ? 'up' : 'down'"
          @click="planBoardVisible = !planBoardVisible"
        />
      </div>
      <div  v-if="planBoardVisible ">
        <div class="mb12" v-if="!onlyRead">
          <a-button
            class="ml12"
            type="primary"
            @click="addRow"
          >增行</a-button>
        </div>
        <!-- 表格 -->
        <a-table bordered :data-source="dataSource" :columns="columns1" rowKey="guid" size="default" style="width: 100%; overflow-x: auto;" :pagination="false">
            <!-- 监控停止点 -->
            <template slot="monitorEndpoint" slot-scope="text, record, index">
              <EditableCell :maxLength="100" :key="index + '-monitorEndpoint'" :text="text" @change="onCellChange(record, 'monitorEndpoint', $event)" :disabled="record.operation === false || onlyRead " :required="true"></EditableCell>
            </template>
            <!-- 验证人 -->
            <template slot="verifierId" slot-scope="text, record, index">
              <EditableSelect :key="index + '-verifierId'" :text="text" :options="organizePeopleList"  @change="onCellChange(record, 'verifierId', $event)" :disabled="record.operation === false || onlyRead " :required="true"></EditableSelect>
            </template>
            <!-- 检查人 -->
            <template slot="checkerId" slot-scope="text, record, index">
              <EditableSelect :key="index + '-checkerId'" :text="text" :options="organizePeopleList" @change="onCellChange(record, 'checkerId', $event)" :disabled="record.operation === false || onlyRead " :required="true"></EditableSelect>
            </template>
            <!-- 生效日期 -->
            <template slot="takeEffectDate" slot-scope="text, record, index">
              <EditableDate :key="index + '-takeEffectDate'" :text="text" @change="onCellChange(record, 'takeEffectDate', $event)" :disabled="record.operation === false || onlyRead " :required="true" :disabledDate="currentDate"></EditableDate>
            </template>
            <!-- 检查时限 -->
            <template slot="timeLimit" slot-scope="text, record, index">
              <EditableDate :key="index + '-timeLimit'" :text="text" @change="onCellChange(record, 'timeLimit', $event)" :disabled="record.operation === false || onlyRead " :required="true" :disabledDate="record.takeEffectDate"></EditableDate>
            </template>
            <!-- 检查频率（天/次） -->
            <template slot="frequency" slot-scope="text, record, index">
              <EditableNumber :min="1" :step="1" :key="index + '-frequency'" :text="text" @change="onCellChange(record, 'frequency', $event)" :disabled="record.operation === false || onlyRead " :required="true"></EditableNumber>
            </template>
            <template
              slot="action"
              slot-scope="text, record, index"
            >
              <a-popconfirm title="请确认是否要删除？" @confirm="() => onDelete(record)" v-if="record.operation !== false">
                <a class="base-btn del_btn">删除</a>
              </a-popconfirm>
            </template>
        </a-table>
      </div>
      
    </div>
  </template>
    
  <script>
  import EditableCell from '@/views/quality/riskIdentification/components/EditableCell'
  import EditableSelect from '@/views/quality/riskIdentification/components/EditableSelect'
  import EditableDate from '@/views/quality/riskIdentification/components/EditableDate'
  import EditableNumber from '@/views/quality/riskIdentification/components/EditableNumber'
  import { riskMonitorPlangetEmoById } from '@/api/quality/risk/monitoringPlan'
  const getGuid = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0
          var v = c === 'x' ? r : (r & 0x3 | 0x8)
          return v.toString(16)
      })
  }
  export default {
    name: 'a' + Date.now(),
    components: {
      EditableCell,
      EditableSelect,
      EditableDate,
      EditableNumber,
    },
    props: {
      // 表单
      form: {
        type: Object,
        default: () => ({})
      },
      // 只读模式
      onlyRead: {
        type: Boolean,
        default: () => false
      },
      // 是否显示箭头
      showPlanBoardVisible: {
        type: Boolean,
        default: () => false
      },
      // 默认展开
      defaultPlanBoardVisible: {
        type: Boolean,
        default: () => true
      }
    },
    computed: {
      columns1() {
        let list = [
          {
              title: '监控停止点',
              dataIndex: 'monitorEndpoint',
              scopedSlots: { customRender: 'monitorEndpoint' },
              ellipsis: true,
              width: 150,
          },
          {
              title: '验证人',
              dataIndex: 'verifierId',
              scopedSlots: { customRender: 'verifierId' },
              width: 150,
          },
          {
              title: '检查人',
              dataIndex: 'checkerId',
              scopedSlots: { customRender: 'checkerId' },
              ellipsis: true,
              width: 150,
          },
          {
              title: '生效日期',
              dataIndex: 'takeEffectDate',
              scopedSlots: { customRender: 'takeEffectDate' },
              width: 150,
          },
          {
              title: '检查时限',
              dataIndex: 'timeLimit',
              scopedSlots: { customRender: 'timeLimit' },
              width: 150,
          },
          {
              title: '检查频率(天/次)',
              dataIndex: 'frequency',
              scopedSlots: { customRender: 'frequency' },
              width: 150,
          },
          
      ]
      if (!this.onlyRead) {
        list.push({
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            width: 100,
        })
      }
      return list
      },
    },
    watch: {
      defaultPlanBoardVisible: {
        handler(val) {
          this.planBoardVisible = val
        },
        immediate: true,
        deep: true
      },
      'form.trackDetails': {
        handler(val) {
          if (val) {
            this.dataSource = val.map(v => {
              v.guid = getGuid()
              return v
            })
          }
        },
        immediate: true,
        deep: true
      },
      'form.projectId': {
        handler(val) {
          if (val) {
            this.riskMonitorPlangetEmoById()
          }
        },
        immediate: true,
        deep: true
      },
        
    },
    data() {
      return {
        dataSource: [],
        organizePeopleList: [],
        currentDate: new Date(),
        planBoardVisible: false
      }
    },
    created() {
    },
    methods: {
      onCellChange(item, dataIndex, value) {
        const dataSource = this.$clone(this.dataSource)
        const target = dataSource.find((el) => el.guid === item.guid)
        if (target) {
          target[dataIndex] = value
          if (dataIndex === 'takeEffectDate') {
            target['timeLimit'] = ''
          }
          this.dataSource = dataSource
        }
      },
      onDelete(item) {
        const dataSource = [...this.dataSource]
        this.dataSource = dataSource.filter((el) => el.guid !== item.guid)
      },
      addRow() {
        const { dataSource } = this
        const templateAddRow = {
            monitorEndpoint: '',
            verifierId: '',
            checkerId: '',
            takeEffectDate: null,
            timeLimit: null,
            frequency: undefined,
        }
        this.dataSource = [...dataSource, { ...templateAddRow, guid: getGuid() }]
      },
      //获取项目下的人员列表
      riskMonitorPlangetEmoById() {
        if (!this.form.projectId) return
        this.fetchingOrganizePeopleList = true
        riskMonitorPlangetEmoById(this.form.projectId).then((res) => {
          this.fetchingOrganizePeopleList = false
          let obj = {}
          res.data = res.data.reduce((cur, next) => {
            obj[next.employeeId] ? '' : (obj[next.employeeId] = true && cur.push(next))
            return cur
          }, []) //设置cur默认类型为数组，并且初始值为空的数组
          this.organizePeopleList = res.data.map(item => {
            item.value = item.employeeId
            item.label = item.employeeName
            return item
          })
        })
      },
    },
  }
  </script>
  <style lang="less" scoped>
  .title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .titleName {
      margin: 0;
    }
    .anticon {
      margin-left: 5px;
      font-size: 18px;
    }
  }
  </style>